import React, { useEffect, useRef, useState } from 'react';
import DocumentTitle from 'react-document-title';

import { handelCollect, getCollectGoods } from '@api'

import { MyFavoritesStyle } from '../style'
import { FavoritesGoodsItem } from '@common/goodsItem'
import { List, SwipeAction, Toast } from 'antd-mobile';
import BetterScroll from 'components/betterScroll'
import { EmptyData } from '@common';
import { useSelector } from 'react-redux';



const Favorites = props => {

  const appConfig = useSelector(state => state.appConfig)
  const { uniacid } = appConfig
  const mfaBT = useRef()
  const [isFa, setIsFa] = useState(true)
  const [favoritesDataList, setFavoritesDataList] = useState([])

  useEffect(() => {
    getCollectGoods({ uniacid }).then(res => {
      if (res.status === 200) {
        setFavoritesDataList(res.data)
      } else {
        Toast.info('网络错误', 2)
      }
    })

    return () => {

    }
  }, [])

  useEffect(() => {
    mfaBT.current.BScroll.refresh();
    return () => {
    }
  }, [favoritesDataList])


  return (
    <>
      <DocumentTitle title={props.route.title} />
      <MyFavoritesStyle>
        <List>
          <div className="main">
            <BetterScroll
              isLoadMore={isFa}
              loadMore={e => {
                LoadingMore('', 'orderList', 0, 'isOl')
              }}
              ref={mfaBT} style={{ height: " calc( 100vh - .6rem )" }} >

              {
                favoritesDataList.length > 0 &&
                favoritesDataList.map((item, key) => {
                  return (

                    <SwipeAction
                      key={key + item.good.gimg}
                      style={{ marginTop: ".16rem" }}
                      autoClose
                      right={[
                        {
                          text: '取消',
                          onPress: () => console.log('取消'),
                          style: { backgroundColor: '#ddd', color: 'white' },
                        },
                        {
                          text: '删除',
                          onPress: () => { addCollect(item.good.gid, key) },
                          style: { backgroundColor: '#F4333C', color: 'white' },
                        },
                      ]}

                      onOpen={() => console.log('global open')}
                      onClose={() => console.log('global close')}
                    >
                      <List.Item
                      >
                        <FavoritesGoodsItem goods={item.good} marginStyle={{ padding: '.16rem 0' }} />
                      </List.Item>
                    </SwipeAction>

                  )
                })
              }

              {
                favoritesDataList.length === 0 && <EmptyData who="快去收藏商品吧" />
              }

            </BetterScroll>

          </div>
        </List>
      </MyFavoritesStyle>
    </>
  )

  function LoadingMore() {

  }

  function addCollect(goodsid, key) {
    //  取消收藏
    handelCollect({ uniacid, goodsid }).then(res => {
      if (res.status === 200) {
        Toast.success(res.msg, 1)
        setFavoritesDataList(favoritesDataList.filter((item, kex) => kex !== key))
      } else {
        Toast.fail(res.msg, 2)
      }
    })
  }
}


export default Favorites;